<script setup lang="ts">
import { Button, Flex, Switch } from 'ant-design-vue';
import { Moon, SunOne } from '@icon-park/vue-next';

defineOptions({
  name: 'AppSettingsAppearance',
});

/**
 * 主题
 */
const themeOptions = [
  { value: 'dark', label: '深色', icon: Moon },
  { value: 'light', label: '浅色', icon: SunOne },
];
const currentTheme = ref('light');
const currentThemeClass = computed(() => (value: string) => {
  return currentTheme.value === value ? 'setting-block-active' : 'setting-block';
});

const darkSidebar = ref(true);
const darkTop = ref(true);

/**
 * 内置主题
 */
const colorOptions = [
  {
    value: '#4096ff',
    label: '默认',
  },
  {
    value: '#7166f0',
    label: '罗兰紫',
  },
  {
    value: '#e84a6c',
    label: '樱花粉',
  },
  {
    value: '#efbd48',
    label: '柠檬黄',
  },
  {
    value: '#4e69fd',
    label: '天蓝色',
  },
  {
    value: '#0bd092',
    label: '浅绿色',
  },
  {
    value: '#3f3f46',
    label: '锌色灰',
  },
  {
    value: '#0d9496',
    label: '深绿色',
  },
  {
    value: '#0960be',
    label: '深蓝色',
  },
  {
    value: '#c1420b',
    label: '橙黄色',
  },
  {
    value: '#bb1b1b',
    label: '玫瑰红',
  },
  {
    value: '#344256',
    label: '石板灰',
  },
];
const currentColor = ref('#4096ff');
const currentColorClass = computed(() => (value: string) => {
  return currentColor.value === value ? 'setting-block-active' : 'setting-block';
});

/**
 * 圆角
 */
const radiusOptions = [
  {
    label: '0',
    value: '0',
  },
  {
    label: '0.25',
    value: '0.25',
  },
  {
    label: '0.5',
    value: '0.5',
  },
  {
    label: '0.75',
    value: '0.75',
  },
  {
    label: '1',
    value: '1',
  },
];
const currentRadius = ref('0.5');
const currentRadiusType = computed(() => (value: string) => {
  return currentRadius.value === value ? 'primary' : 'default';
});

/**
 * 其他
 */
const colorblindMode = ref(true);
const grayscaleMode = ref(true);
</script>

<template>
  <div>
    <h3>主题</h3>
    <Flex gap="small">
      <div
        v-for="theme of themeOptions"
        :key="theme.value"
        class="flex-auto"
      >
        <div
          :class="currentThemeClass(theme.value)"
          class="p-6 flex justify-center items-center"
          @click="currentTheme = theme.value"
        >
          <Component
            :is="theme.icon"
            :theme="currentTheme === theme.value ? 'filled' : 'outline'"
            size="25"
            :stroke-width="3"
            stroke-linecap="butt"
            :fill="currentTheme === theme.value ? '#4096ff' : '#333'"
          />
        </div>
        <span class="mt-2 flex justify-center text-sm">{{ theme.label }}</span>
      </div>
    </Flex>
    <div class="setting-line">
      <span>深色侧边栏</span>
      <Switch v-model:checked="darkSidebar" />
    </div>
    <div class="setting-line">
      <span>深色顶栏</span>
      <Switch v-model:checked="darkTop" />
    </div>

    <h3>内置主题</h3>
    <Flex gap="small" wrap="wrap">
      <div
        v-for="color of colorOptions"
        :key="color.value"
        class="flex-auto"
      >
        <div
          :class="currentColorClass(color.value)"
          class="p-6 flex justify-center items-center"
          @click="currentColor = color.value"
        >
          <div class="color-block" :style="{ backgroundColor: color.value }" />
        </div>
        <span class="mt-2 flex justify-center text-sm">{{ color.label }}</span>
      </div>
    </Flex>

    <h3>圆角</h3>
    <Flex gap="small">
      <Button
        v-for="radius of radiusOptions"
        :key="radius.value"
        block :type="currentRadiusType(radius.value)"
      >
        {{ radius.label }}
      </Button>
    </Flex>

    <h3>其他</h3>
    <div class="setting-line">
      <span>色弱模式</span>
      <Switch v-model:checked="colorblindMode" />
    </div>
    <div class="setting-line">
      <span>灰色模式</span>
      <Switch v-model:checked="grayscaleMode" />
    </div>
  </div>
</template>

<style scoped lang="less">
.setting-block {
  border-radius: 4px;
  border: 1px solid #e4e4e7;
  &-active {
    border-radius: 4px;
    border: 1px solid #4096ff;
  }
  &:hover {
    cursor: pointer;
  }
}

.color-block {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.setting-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 6px;
  border-radius: 4px;

  &:hover {
    cursor: pointer;
    background: #f4f4f5;
  }
}
</style>
